<script setup>
import { RollbackOutlined, UploadOutlined, DownloadOutlined, EyeOutlined, DeleteOutlined } from '@ant-design/icons-vue';

const emits = defineEmits(['onCommand']);

const router = useRouter();
const toolIcons = [
    { label: '上传', command: 'uplaod', icon: UploadOutlined },
    { label: '下载', command: 'download', icon: DownloadOutlined },
    { label: '预览', command: 'preview', icon: EyeOutlined },
    { label: '删除', command: 'delete', icon: DeleteOutlined },
];

const onCommand = (command) => {
    emits('onCommand', command);
};
</script>

<template>
    <section class="header-wrapper">
        <a-row style="width: 100%">
            <a-col :span="4"><RollbackOutlined @click="router.go(-1)" /></a-col>
            <a-col :span="16">
                <section class="tool-bar">
                    <a-tooltip placement="topLeft" :title="tool.label" v-for="tool in toolIcons" :key="tool.label">
                        <a-button type="link" style="margin-right: 20px" @click="onCommand(tool.command)">
                            <template #icon>
                                <component :is="tool.icon" />
                            </template>
                        </a-button>
                    </a-tooltip>
                </section>
            </a-col>
            <a-col :span="4"></a-col>
        </a-row>
    </section>
</template>

<style lang="scss" scoped>
.header-wrapper {
    height: 56px;
    padding: 0 30px;
    width: 100%;
    display: flex;
    align-items: center;
}
.tool-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    .tool-box {
        margin-right: 50px;
    }
}
</style>
